﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>[求职] Web前端开发工程师</title>
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="assets/css/typo.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/index.css">

    <script>
        function loading() {
            document.getElementsByClassName('avatar')[0].style.display = 'block';
            document.getElementsByClassName('loading')[0].style.display = 'none';
        }
    </script>
</head>

<body>

    <header class="header"></header>

    <article class="container">
        <section class="side" id="side">


            <label class="switch" style="display: none;" onchange="switchFixed()">
                <script type="text/javaScript">
                    function switchFixed() {
                    var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
                    document.getElementById('side').style.position = value;
                }
            </script>
                <input id="cb" type="checkbox">
                <span class="slider round"></span>
            </label>
            <!-- 个人肖像 -->
            <section class="me">
                <section class="portrait">
                    <!-- <div class="loading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div> -->
                    <!-- 头像照片 -->
                    <img class="avatar" src="assets/images/card.jpg">
                </section>

                <h1 class="name"><strong>意向岗位</strong></h1>
                <h4 class="info-job"><strong>Web前端开发工程师</strong> </h4>

            </section>

            <!-- 基本信息 -->
            <section class="profile info-unit">
                <h2>
                    <i class="fa fa-user" aria-hidden="true"></i>基本信息
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>个人信息</label>
                        <span>刘宝宏 / 男 / 21岁</span>
                    </li>
                    <li>
                        <label>英语水平</label>
                        <span>CET-4</span>
                    </li>

                </ul>
            </section>

            <!-- 联系方式 -->
            <section class="contact info-unit">
                <h2>
                    <i class="fa fa-phone" aria-hidden="true"></i>联系方式
                </h2>
                <hr />
                <ul>
                    <li>
                        <label><i class="fa fa-qq"></i></label>
                        <a target="_blank">2973410067</a>
                    </li>
                    <li>
                        <label><i class="fa fa-envelope"></i></label>
                        <a href="mailto:hack_hu@163.com" target="_blank">2973410067@qq.comn</a>
                    </li>
                    <li>
                        <label><i class="fa fa-phone"></i></label>
                        <a href="https://blog.csdn.net/qq_38288847" target="_blank">14704546609</a>
                    </li>
                    <li>
                        <label><i class="fa fa-github" aria-hidden="true"></i></label>
                        <a href="https://gitee.com/dashboard/projects" target="_blank">gitee.com</a>
                    </li>
                </ul>
            </section>

            <!-- 教育经历 -->
            <section class="edu info-unit">
                <h2>
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3>
                            <p>桂林电子科技大学 —— 专科</p>
                            <p>专业：电子信息工程技术</p>
                        </h3>
                        <time>时间：<mark> 2020.9-2023.6</mark></time>
                        <!-- <p>
                            GPA：<mark>4.38/5.0</mark>
                        </p> -->
                        <p>专业排名：<mark>前 20%</mark>
                        </p>
                    </li>
                </ul>
            </section>

            <!-- 个人荣誉 -->
            <section class="edu info-unit">
                <h2>
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>个人荣誉
                </h2>
                <hr />


                2022 年全国大学生英语四级<br />
                <!-- 2、  <br /> -->

            </section>
            <!-- 个人技能 -->
            <section class="skill info-unit">
                <h2>
                    <i class="fa fa-code" aria-hidden="true"></i>技能点
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>HTML</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>JavaScript</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>CSS</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>Vue</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>Ajax</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>小程序</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>uniapp</label>
                        <progress value="60" max="100"></progress>
                    </li>
                </ul>
            </section>
        </section>

        <section class="main">

            <!-- 专业能力 -->
            <section class="work info-unit">
                <h2>
                    <i class="fa fa-pencil" aria-hidden="true"></i>专业能力
                </h2>
                <hr />
                <p> 熟练掌握 HTML5、CSS3，能够进行 PC 端/移动端网站开发；
                </p>
                <p>
                    熟练掌握 JavaScript，DOM 编程，ES6 的新特性；
                </p>
                <p>
                    熟练掌握 Vue2，Vue3 以及核心插件 Vue Router、Vuex、Pinia；
                </p>
                <p>
                    熟练使用 Scss 预编译语言
                </p>
                <p>
                    熟练使用 Vue 移动端组件库 Vant 以及 PC 端组件库 Element UI；
                </p>
                <p>
                    熟练使用 Ajax 与后台通信，获取数据；
                </p>
                <p>
                    熟练使用 git 分支管理工具；
                </p>
                <p>
                    熟练掌握小程序项目的开发；
                </p>
                <p>
                    熟悉 node.js 使用 Express 搭建本地服务器；
                </p>
            </section>

            <!-- 工作经历 -->

            <section class="project info-unit">
                <h2>
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>工作经历
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3>
                            <span>【实习】：广州奎星科技有限公司</span>
                            <time>2022.10-2023.04</time>
                        </h3>
                        <ul class="info-content">
                            <li><i class="fa fa-users" aria-hidden="true"></i>
                                [工作岗位]：前端开发
                            </li>
                            <!-- <li><i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [参与项目]：API管理中心
                            </li> -->
                            <li>
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]<br />
                                <p>
                                    &emsp;&emsp;1、按照 UI 设计图完成页面设计；<br />
                                    &emsp;&emsp;2、负责产品前端开发工作，完成产品和项目开发；<br />
                                </p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </section>

            <!-- 项目经验 -->
            <section class="project info-unit">
                <h2>
                    <i class="fa fa-terminal" aria-hidden="true"></i>项目经验
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3>
                            <span>[项目1]<a href="https://gitee.com/baohong-liu/movie.git" target="_blank">
                                    电影购票网站</a></span>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：Vue2 + Vuex + JavaScript + Vue-Router + axios + Vant + Scss</li>
                            <li>
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [职责]前端开发
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [主要贡献]<br />
                                <p>
                                    &emsp;&emsp;1、使用 Vue Router 搭建项目路由，实现路由切换<br />
                                    &emsp;&emsp;2、使用 Vuex 处理组件间的通讯<br />
                                    &emsp;&emsp;3、使用 Vant 组件库和 Swiper 插件完成信息提示，加载中提示，下拉加载等功能<br />
                                    &emsp;&emsp;4、使用路由守卫监听登陆状态，实现路由拦截
                                </p>

                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目2] <a href="https://gitee.com/baohong-liu/ciyuan-comic.git" target="_blank">
                                    漫画小程序</a></span>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：微信小程序 + 云开发 + Scss + vant</li>
                            <li>
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [职责]前端开发
                            </li>
                            <li>
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [主要贡献]<br />
                                <p>
                                    &emsp;&emsp;1、使用 wx.request 进行数据请求
                                    <br>&emsp;&emsp;2、使用云数据库存储漫画详情信息
                                    <br>&emsp;&emsp;3、使用页面路由，进行不同页面之间的跳转
                                    <br>&emsp;&emsp;4、使用自定义 tabBar 设置底部选项卡
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目3] <a href="https://gitee.com/baohong-liu/zhuidu-read.git" target="_blank">
                                    小说阅读网站</a></span>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：Vue3 + TypeScript + Pinia + Scss + vant + axios</li>
                            <li>
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [职责]前端开发
                            </li>
                            <li>
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [主要贡献]<br />
                                <p>
                                    &emsp;&emsp;1、使用 wx.request 进行数据请求
                                    <br>&emsp;&emsp;2、使用云数据库存储漫画详情信息
                                    <br>&emsp;&emsp;3、使用页面路由，进行不同页面之间的跳转
                                    <br>&emsp;&emsp;4、使用自定义 tabBar 设置底部选项卡
                                </p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目4] <a href="https://gitee.com/baohong-liu/mbc.git" target="_blank">
                                    漫画网站</a></span>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：Vue2 + JavaScript + Scss + vant + axios</li>
                            <li>
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [职责]前端开发
                            </li>
                            <li>
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [主要贡献]<br />
                                <p>
                                    &emsp;&emsp;1、使用Vue Router搭建项目路由，实现路由切换
                                    <br>&emsp;&emsp;2、引用Vant组件库中的Swipe轮播，Toast提示，骨架屏等
                                    <br>&emsp;&emsp;3、使用LocalStorage将阅读状态和收藏状态存储到本地
                                    <br>&emsp;&emsp;4、使用rem布局，配合flex布局，使用Scss编写样式
                                </p>
                            </li>
                        </ul>
                    </li>

                </ul>
            </section>




        </section>
    </article>


    <footer class="footer">
        <p> <b>感谢您花时间阅读我的简历，期待能有机会和您共事。</b> </p>
    </footer>

    <!-- 侧栏 -->
    <!-- <aside>
        <ul>
            <li>
                <a href="https://github.com/hackhu2019" target="_blank">Github</a>
            </li>
            <li>
                <a href="https://blog.csdn.net/qq_38288847" target="_blank">Blog</a>
            </li>
        </ul>
    </aside> -->

    <script src="./assets/js/index.js" type="text/javascript"></script>

</body>

</html>